{% extends 'base.html' %}
{% load i18n static simpletags tz %}
{% block title %}
呼吸道疾病智能双端语音识别系统
{% endblock %}

{% block load %}
{% load bootstrap4 %}

{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}
{% endblock %}

{% block content %}
<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>呼吸道疾病智能辅助诊断系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4169E1',
                        secondary: '#1E90FF'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '4px',
                        DEFAULT: '8px',
                        'md': '12px',
                        'lg': '16px',
                        'xl': '20px',
                        '2xl': '24px',
                        '3xl': '32px',
                        'full': '9999px',
                        'button': '8px'
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>

<body class="bg-gray-50 min-h-[1024px]">
    <div class="max-w-[1440px] mx-auto px-6">
        <div class="flex items-center justify-center min-h-screen py-12">
            <div class="w-full max-w-4xl bg-white rounded-lg shadow-xl overflow-hidden">
                <!-- 顶部图片部分 -->
                <div class="relative h-[280px] bg-primary/10 overflow-hidden">
                    <div class="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-white to-transparent"></div>
                    <img src="{{ context.img_url|default:'https://ai-public.mastergo.com/ai/img_res/91f58bee0faa0cd6bc1002995fe82ec0.jpg' }}"
                        alt="医疗诊断背景图" class="w-full h-full object-cover">
                </div>
                <div class="p-8">
                    <!-- 预测结果和诊断时间 -->
                    <div class="mb-8">
                        {% if context.diagnosis_result %}
                        <h2 class="text-3xl font-bold text-gray-800 mb-2">
                            预测结果：<span class="text-primary">{{ context.diagnosis_result }}</span>
                        </h2>
                        {% else %}
                        <h2 class="text-3xl font-bold text-gray-800 mb-2">
                            预测结果：<span class="text-primary">未获取到数据</span>
                        </h2>
                        {% endif %}
                        <p class="text-gray-500 flex items-center gap-2">
                            <i class="fas fa-clock text-primary"></i>
                            <!-- 默认当前时间，如果查看历史纪录则显示诊断时间 -->
                            诊断时间：{{ context.diagnosis_date|default:"" }}
                        </p>
                        <div class="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
                            <p class="text-red-700 flex items-center gap-2">
                                <i class="fas fa-exclamation-triangle text-red-500"></i>
                                温馨提示：AI 模型预测结果仅供参考，为了您的健康，建议及时就医进行专业诊断。如有任何不适，请立即就医。
                            </p>
                        </div>
                    </div>
                    <!-- 预测率展示 -->
                    <div class="space-y-4 mb-8">
                        {% if context.prediction_rate %}
                        <!-- Django template language does not support Python's range function directly. You should use the for tag with the context.confidence list directly. -->
                        {% for disease_name, confidence in context.prediction_rate.items %}
                        <div class="mb-4">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-lg font-medium text-gray-700">{{ disease_name }}</span>
                                <span class="text-lg font-bold text-primary">预测率 {{ confidence }}%</span>
                            </div>
                            <div class="w-full h-3 bg-gray-200 rounded-full overflow-hidden">
                                <div class="h-full bg-gradient-to-r from-green-300 to-blue-300"
                                    style="width:  {{ confidence }}%"></div>
                            </div>
                        </div>
                        {% endfor %}
                        {% else %}
                        <!-- 默认静态数据 -->
                        <div class="mb-4">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-lg font-medium text-gray-700">预测率：COVID-19</span>
                                <span class="text-lg font-bold text-primary">0%</span>
                            </div>
                            <div class="w-full h-3 bg-gray-200 rounded-full overflow-hidden">
                                <div class="h-full bg-gradient-to-r from-green-300 to-blue-300" style="width: 0%">
                                </div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-lg font-medium text-gray-700">预测率：普通感冒</span>
                                <span class="text-lg font-bold text-primary">0%</span>
                            </div>
                            <div class="w-full h-3 bg-gray-200 rounded-full overflow-hidden">
                                <div class="h-full bg-gradient-to-r from-green-300 to-blue-300" style="width: 0%">
                                </div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-lg font-medium text-gray-700">预测率：支气管炎</span>
                                <span class="text-lg font-bold text-primary">0%</span>
                            </div>
                            <div class="w-full h-3 bg-gray-200 rounded-full overflow-hidden">
                                <div class="h-full bg-gradient-to-r from-green-300 to-blue-300" style="width: 0%">
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-lg font-medium text-gray-700">预测率：肺炎</span>
                                <span class="text-lg font-bold text-primary">0%</span>
                            </div>
                            <div class="w-full h-3 bg-gray-200 rounded-full overflow-hidden">
                                <div class="h-full bg-gradient-to-r from-green-300 to-blue-300" style="width: 0%">
                                </div>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                    <!-- 疾病介绍、治疗建议、预防建议 -->
                    <div class="space-y-6">
                        <section>
                            <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
                                <i class="fas fa-info-circle text-primary"></i>疾病介绍
                            </h3>
                            <p class="text-gray-700 leading-relaxed">
                                {{ context.introduction|default:"这是一个呼吸道疾病的介绍。它可能包括各种症状和传播途径。" }}
                            </p>
                        </section>
                        <section>
                            <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
                                <i class="fas fa-stethoscope text-primary"></i>治疗建议
                            </h3>
                            <p class="text-gray-700 leading-relaxed">
                                {{context.treatment|default:"根据症状的严重程度，采取相应的治疗措施。轻症患者可以居家隔离，保持充分休息和良好的营养状态。中重症患者需要及时就医，接受规范治疗。"}}
                            </p>
                            </p>
                        </section>
                        <section>
                            <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
                                <i class="fas fa-shield-alt text-primary"></i>预防建议
                            </h3>
                            <div class="grid grid-cols-2 gap-4">
                                {% if context.prevention_list %}
                                {% for advice in context.prevention_list %}
                                <div class="flex items-start gap-4 p-4 bg-gray-50 rounded-lg">
                                    <i class="{{ advice.icon|default:'fas fa-hands-wash' }} text-primary mt-1"></i>
                                    <div>
                                        <h4 class="font-medium mb-2">{{ advice.title }}</h4>
                                        <p class="text-gray-700">{{ advice.text }}</p>
                                    </div>
                                </div>
                                {% endfor %}
                                {% else %}
                                <div class="flex items-start gap-4 p-4 bg-gray-50 rounded-lg">
                                    <i class="fas fa-hands-wash text-primary mt-1"></i>
                                    <div>
                                        <h4 class="font-medium mb-2">个人卫生</h4>
                                        <p class="text-gray-700">勤洗手，保持手部卫生</p>
                                    </div>
                                </div>
                                <div class="flex items-start gap-4 p-4 bg-gray-50 rounded-lg">
                                    <i class="fas fa-head-side-mask text-primary mt-1"></i>
                                    <div>
                                        <h4 class="font-medium mb-2">佩戴口罩</h4>
                                        <p class="text-gray-700">外出时正确佩戴口罩</p>
                                    </div>
                                </div>
                                <div class="flex items-start gap-4 p-4 bg-gray-50 rounded-lg">
                                    <i class="fas fa-people-arrows text-primary mt-1"></i>
                                    <div>
                                        <h4 class="font-medium mb-2">保持距离</h4>
                                        <p class="text-gray-700">与他人保持安全社交距离</p>
                                    </div>
                                </div>
                                <div class="flex items-start gap-4 p-4 bg-gray-50 rounded-lg">
                                    <i class="fas fa-house-user text-primary mt-1"></i>
                                    <div>
                                        <h4 class="font-medium mb-2">室内通风</h4>
                                        <p class="text-gray-700">保持室内经常通风换气</p>
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>



{% endblock %}